<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>登录</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="img/icon.png">

    <!-- Google font (font-family: 'Roboto', sans-serif;) -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
    <!-- Google font (font-family: 'Poppins', sans-serif;) -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!-- Plugins -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/plugins.css">

    <!-- Style Css -->
    <link rel="stylesheet" href="style.css">

    <!-- Custom Styles -->
    <link rel="stylesheet" href="css/custom.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>

<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- Add your site or application content here -->

<!-- Wrapper -->
<div id="wrapper" class="wrapper">

    <!-- Header -->
    <header class="header sticky-header">

        <!-- Header Top Area -->
        <header-top id="headerTop"></header-top>
        <!--// Header Top Area -->

        <!-- Header Bottom Area -->
        <header-bottom id="headerBottom" :levelone="levelonwe" :leveltwo="leveltwo"></header-bottom>
        <!--// Header Bottom Area -->

        <!-- Header Mobile Menu -->
        <div class="mobile-menu-area d-block d-lg-none">
            <div class="container">
                <div class="mobile-menu clearfix">
                    <ul class="header-icons">
                        <li>
                            <button class="header-search-trigger"><i class="ti ti-search"></i></button>
                            <div class="header-searchbox-wrapper">
                                <form class="header-searchbox" action="search.html">
                                    <input type="text" placeholder="Search">
                                    <button><i class="ti ti-search"></i></button>
                                </form>
                            </div>
                        </li>
                        <li>
                            <button class="header-minicart-trigger"><i class="ti ti-shopping-cart"></i></button>
                            <div class="minicart header-minicart">
                                <ul class="minicart-product-list">
                                    <li>
                                        <a href="product-details.html" class="minicart-product-image">
                                            <img src="img/product/product-image-1-1.jpg" alt="cart products">
                                        </a>
                                        <div class="minicart-product-details">
                                            <h6><a href="product-details.html">美式咖啡（热/冷）</a></h6>
                                            <span>￥27 x 2</span>
                                        </div>
                                        <button class="close">
                                            <i class="ti ti-close"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <a href="product-details.html" class="minicart-product-image">
                                            <img src="img/product/product-image-1-2.jpg" alt="cart products">
                                        </a>
                                        <div class="minicart-product-details">
                                            <h6><a href="product-details.html">拿铁（热/冷）</a></h6>
                                            <span>￥31 x 1</span>
                                        </div>
                                        <button class="close">
                                            <i class="ti ti-close"></i>
                                        </button>
                                    </li>
                                </ul>
                                <p class="minicart-total">小计: <span>￥85.00</span></p>
                                <div class="minicart-button">
                                    <a href="cart.html"
                                       class="sf-button sf-button-dark sf-button-fullwidth sf-button-sm">
                                        <span>查看完整购物车</span>
                                    </a>
                                    <a href="checkout.html" class="sf-button sf-button-fullwidth sf-button-sm">
                                        <span>结算</span>
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <a href="index.html" class="logo">
                        <img src="img/logo/logo-dark.png" alt="slimfit">
                    </a>
                </div>
            </div>
        </div>
        <!--// Header Mobile Menu -->

    </header>
    <!--// Header -->

    <!-- Bradcrumb Area -->
    <div class="sn-breadcrumb-area bg-breadcrumb-1 section-padding-xs" data-white-overlay="7">
        <div class="container">
            <div class="sf-breadcrumb">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li>登录</li>
                </ul>
            </div>
        </div>
    </div>
    <!--// Bradcrumb Area -->

    <!-- Page Conttent -->
    <main class="page-content">

        <!-- Checkout Area -->
        <div class="checkout-area bg-white section-padding-xs">
            <div class="container">

                <blockquote class="ml-0 mt-0 p-3">
                    请输入用户名和密码进行登录！如果还没有账户，请前往 <a href="register.html"><b>注册</b></a>
                </blockquote>
                <!--       ↓    checkout-info-login-->
                <form action="#" class="sf-form sf-form-boxed" id="login_form">
                    <div class="sf-form-inner">
                        <div class="single-input">
                            <label for="login-form-email">用户名 *</label>
                            <input type="text" name="username" id="login-form-email">
                        </div>
                        <div class="single-input">
                            <label for="login-form-password">密码 *</label>
                            <input type="password" name="password" id="login-form-password">
                        </div>
                        <div class="single-input">
                            <button type="button" class="sf-button sf-button-dark mr-3" @click="userLogin">登录</button>
                            <span></span>
                            <div class="checkbox-input">
                                <input type="checkbox" name="rem" id="login-form-remember">
                                <label for="login-form-remember">记住密码</label>
                            </div>
                        </div>
                        <div class="single-input">
                            <a href="#">忘记密码?</a>
                        </div>
                    </div>
                </form>

            </div>
        </div>
        <!--// Checkout Area -->
    </main>
    <!--// Page Conttent -->
    <!-- Footer Area -->
    <footer class="footer-area">

        <!-- Footer Top Area -->
        <div class="footer-top-area bg-grey section-padding-xs">
            <div class="container">
                <div class="row footer-widgets">

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-about">
                            <a href="index.html" class="footer-logo">
                                <img src="img/logo/logo-theme.png" alt="slimfit">
                            </a>
                            <p>我们希望通过每一杯咖啡，将 Coffee 的咖啡传承与独特的咖啡体验带给我们的顾客。</p>
                            <ul class="footer-social-icons">
                                <li><a href="#"><i class="ti ti-facebook"></i></a></li>
                                <li><a href="#"><i class="ti ti-instagram"></i></a></li>
                                <li><a href="#"><i class="ti ti-google"></i></a></li>
                                <li><a href="#"><i class="ti ti-pinterest"></i></a></li>
                                <li><a href="#"><i class="ti ti-twitter"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-links footer-widget-links-1">
                            <h6 class="footer-widget-title">我的帐户</h6>
                            <ul>
                                <li><a href="#">跟踪订单</a></li>
                                <li><a href="#">退货政策</a></li>
                                <li><a href="#">保修时间</a></li>
                                <li><a href="#">付款</a></li>
                                <li><a href="#">常见问题解答</a></li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-links footer-widget-links-2">
                            <h6 class="footer-widget-title">购物指南</h6>
                            <ul>
                                <li><a href="#">热销</a></li>
                                <li><a href="#">最佳销售</a></li>
                                <li><a href="#">供应商</a></li>
                                <li><a href="#">我们的商店</a></li>
                                <li><a href="#">当天的交易</a></li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                    <!-- Single Widget -->
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <div class="footer-widget footer-widget-contact">
                            <h6 class="footer-widget-title">联系信息</h6>
                            <ul>
                                <li><i class="ti ti-home"></i>广西南宁市</li>
                                <li><i class="ti ti-comment"></i>Coffee</li>
                                <li><i class="ti ti-mobile"></i><a href="tel:+8612345678901">(+86) 12345678901</a></li>
                                <li><i class="ti ti-timer"></i>8.00 am-6.00 pm</li>
                            </ul>
                        </div>
                    </div>
                    <!--// Single Widget -->

                </div>
            </div>
        </div>
        <!--// Footer Top Area -->

        <!-- Footer Bottom Area -->
        <div class="footer-bottom-area bg-dark">
            <div class="container">
                <div class="footer-copyright-area">
                    <p>Copyright © 2021 . All Right Reserved.</p>
                    <!--<img src="img/icons/payment.png" alt="payment icon">-->
                </div>
            </div>
        </div>
        <!--// Footer Bottom Area -->

    </footer>
    <!--// Footer Area -->
</div>
<!--// Wrapper -->

<!-- Js Files -->
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="js/vendor/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/header_top_temp.js"></script>
<script src="js/header_bottom_temp.js"></script>
<script src="js/header_bottom.js"></script>

<script>
    let login_vm = new Vue({
        el:"#login_form",
        data:{
            username:"",
            password:"",
        },
        methods:{
            userLogin:function () {
                let data = new FormData(document.querySelector("#login_form"));
                axios.post("/v1/user/userLogin",data).then(function (response) {
                    console.log("为什么进不来?");
                    if(response.data==1){
                        alert("登录成功!");
                        location.href="/user/index.html";
                    }else if(response.data==2){
                        alert("密码错误!");
                    }else {
                        alert("账号不存在!");
                    }
                })
            }
        }
    })
    //取出浏览器通过cookie保存的用户名和密码
    let cookie = document.cookie;
    //username=admin; password=123456;
    let cookisArr = cookie.split(";");
    for (let c of cookisArr){
        //通过=分割
        let arr = c.split("=");
        let name = arr[0];
        let value = arr[1];
        if(name.trim()=="username"){
            console.log("用户名="+value)
            vm.username = value;
        }
        if (name.trim()=="password"){
            console.log("密码="+value);
            vm.password = value;
        }
    }
</script>
</body>

</html>